<template>
	<div class="login">
		<div class="logincont">
			<div class="top">
				<img src="https://m.qpmall.com/images/newSui/logo.png" />
			</div>
			<div class="fromDiv">
				<img src="https://m.qpmall.com/images/newSui/linelog.png" width="100%" />
				<div class="logininner">
					<div class="usernameDiv">
						<i class="iconfont icon-user"></i>
						<input type="text" v-model="username" class="username" placeholder="请输入会00员名44" />
					</div>
					<div class="userpwDiv">
						<i class="iconfont icon-user"></i>
						<input type="password" v-model="userpw" class="userpw" placeholder="请输入密码" />
					</div>
				</div>
				<div class="other">
					<label class="autoLogin"><input type="checkbox" />自动登录</label>
					<router-link :to="{path:'register'}" class="forgetPw">
						<label>忘记密码？</label>
					</router-link>
				</div>
			</div>
		</div>
		<div class="btnDiv">
			<button class="loginBtn btn" @click="handleLogin">登录</button>
			<button class="signBtn btn">注册</button>
		</div>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				username:"",
				userpw:"",
				upUrl:this.$route.query.redirect
			}
		},
		methods: {
			handleLogin() {
				if(this.username==="admin" && this.userpw==="qpmall123"){
					alert("登陆成功");
					const token = 1;
				    window.localStorage.setItem('token', token)
				    this.$router.push({path:this.upUrl})
				}else{
					alert("密码不正确");
				}
			}
		},
		created() {
			this.isshow = false;
		}
	}
</script>

<style>
	.login{
		position: absolute;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	.login .logincont{
		min-height:100%;
		background-color:#000;
	}
	.login .top{
		width: 100%;
	    background: #ffb400;
	    background-size: 100%;
	    height: 35%;
	}
	.login .top img{
   	 	width: 50%;
    	height: auto;
   	 	margin: 25%;
	}
	.login .fromDiv{
		background: #000;
		padding-bottom: 180px;
	}
	.login .fromDiv .logininner{
		background: #fff;
		border-radius: 5px;
		width: 94%;
		margin: 0 auto;
	}
	.login .usernameDiv,.login .userpwDiv{
		padding:15px 10px;
		display: flex;
	}
	.login .usernameDiv{
		border-bottom:solid 1px #ccc;
	}
	.login .iconfont{
		color: #ccc;
		font-size: 1.2rem;
		margin-right: 5px;
		flex: 0 0 0 50px;
	}
	.login .username,.login .userpw{
		flex: 1;
		line-height: 1.2rem;
		padding: 3px;
		border: none;
		outline: none;
	}
	.login .other{
		padding:25px 15px;
		display: flex;
		width: calc(100% - 30px);
	}
	.login .other input{
		margin-right: 5px;
		vertical-align: middle;
	}
	.login .other label{
		color: #959595;
	}
	.login .autoLogin{
		flex: 0 0 100px;
	}
	.login .forgetPw{
		text-align: right;
		flex: 1;
	}
	.login .btnDiv{
		position: relative;
		margin: -180px auto 0 auto;
	}
	.login .btn{
		display: block;
		width: 94%;
		margin: 0 auto;
		border: solid 1px #f53f3e;
		background: #f53f3e;
		color: #fff;
		line-height: 2.7rem;
		margin-bottom: 15px;
		border-radius: 5px;
		font-size: 1rem;
	}
	.login .signBtn{
		background: #000;
		color: #ffb306;
		border: solid 1px #ffb306;
	}
</style>
